<template>
  <div id="templatesPro">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit">文件模板管理</span>
        <i
          class="el-icon-circle-plus-outline"
          @click="appends"
        />
      </div>
      <el-table
        :data="tableData"
        border
        style="width: auto"
        @selection-change="changeFun"
      >
        <el-table-column
          label="选择"
          type="selection"
          width="30"
        />
        <el-table-column
          prop="name"
          label="模板名称"
          width="150"
        />
        <el-table-column
          label="条件附加值"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="conaddvalue(scope.row.id)"
            >附加值详情</el-button>
          </template>
        </el-table-column>
        <!--<el-table-column-->
        <!--prop="specificationType.desc"-->
        <!--label="模板类型"-->
        <!--width="200"-->
        <!--&gt;-->
        <!--</el-table-column>-->
        <el-table-column label="模板操作">
          <template
            slot="header"
            slot-scope="scope"
          >
            <span>模板操作</span>
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
            >
              <div>
                <vue-editor
                  v-model="helpArrays.TEMPLATE_OPERATOR"
                  :disabled="true"
                  :editor-toolbar="customToolbar"
                />
              </div>
              <i
                slot="reference"
                class="el-icon-question"
                style="color:#409eff;font-size:20px;"
              />
            </el-popover>
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="muban(scope.row.id,scope.row.name)"
            >模板集管理</el-button>
            <el-button
              type="text"
              size="small"
              @click="alter(scope.row.id)"
            >修改模板</el-button>
            <el-button
              type="text"
              size="small"
              @click="clonePro(scope.row.id)"
            >克隆模板</el-button>
            <el-button
              type="text"
              size="small"
              @click="delAll(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="5"
        :total="total"
        small
        layout="prev, pager, next"
        @prev-click="prePage"
        @next-click="nextPage"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>
<script>
import { gtmList, docwindow, dataConsole, Clone, DelAll } from '@/api/page'
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      total: 0,
      data: {
        current: 1,
        size: 5,
        condition: {
          templateType: 'GENERATOR'
        }
      },
      checkBoxData: [],
      dialogVisible: false,
      tableData: [],
      options: [],
      arr: [],
      customToolbar: [],
      helpArrays: []
    }
  },
  mounted() {
    this.initPro()
  },
  methods: {
    conaddvalue(a) {
      this.$router.push('/project/conaddval')
      localStorage.setItem('mid', a)
    },
    currentChange(cpage) {
      this.data = {
        current: cpage,
        size: 5,
        condition: {
          templateType: 'GENERATOR'
        }
      }
      gtmList(this.data)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.tableData = response.data.data.records
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    nextPage(cpage) {
      this.data = {
        current: cpage,
        size: 5,
        condition: {
          templateType: 'GENERATOR'
        }
      }
      gtmList(this.data)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.tableData = response.data.data.records
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    prePage(cpage) {
      this.data = {
        current: cpage,
        size: 5,
        condition: {
          templateType: 'GENERATOR'
        }
      }
      gtmList(this.data)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.tableData = response.data.data.records
            this.total = response.data.data.total
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    changeFun(val) {
      this.checkBoxData = val
    },
    appends() {
      this.$router.push('/project/manage')
    },
    muban(a, b) {
      this.data = {
        id: a
      }
      dataConsole(this.data)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            localStorage.setItem('midConsole', response.data.data.varConsole)
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
      localStorage.setItem('mid', a)
      localStorage.setItem('templateType', 'GENERATOR')
      this.$router.push('/project/tdesc')
      localStorage.setItem('proName', b)
    },
    alter(a) {
      localStorage.setItem('mid', a)
      this.$router.push('/project/manage')
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    clonePro(id) {
      var dataSty = {
        'id': id,
        'templateType': 'GENERATOR' // GENERATOR:文件模板  STYLE:样式模板
      }
      Clone(dataSty)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.openFullScreen()
            setTimeout(() => {
              this.initPro()
              this.loading.close()
            }, 1000)
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    },
    delAll(a) {
      var data = {}
      data.id = a
      DelAll(data).then(response => {
        if (response.data.code == 'SUCCESS') {
          this.openFullScreen()
          setTimeout(() => {
            this.initPro()
            this.loading.close()
          }, 1000)
        }
      })
    },
    initPro() {
      localStorage.removeItem('mid')
      localStorage.removeItem('midConsole')
      gtmList(this.data)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.tableData = response.data.data.page.records
            this.total = response.data.data.page.total
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })

      this.arr = ['TEMPLATE_OPERATOR']

      docwindow(this.arr)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.helpArrays = response.data.data
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    }
  }
}
</script>

<style >
#templatesPro {
  margin-top: 20px;
  margin-left: 20px;
}
#templatesPro .el-input {
  width: 120px;
}
#templatesPro .el-table--medium td {
  padding: 0;
}
#templatesPro .el-table--medium th {
  padding: 2px 0;
}
#templatesPro .el-dialog__body .el-button + .el-button {
  margin-left: 0px;
}
#templatesPro .el-table {
  margin: 20px;
}
#templatesPro #mainBox {
  width: 99%;
  border: 1px solid #623f18;
}
#templatesPro #mainBox #boxTit {
  height: 40px;
  width: 100%;
  background: #623f18;
}
#templatesPro #mainBox #boxTit i {
  cursor: pointer;
  float: right;
  line-height: 40px;
  margin-right: 10px;
  font-size: 25px;
  color: #fff;
}
#templatesPro #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
  line-height: 40px;
}
</style>
